import { Menu } from "antd";
import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import {
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from "@ant-design/icons";
const Comp: React.FC = () => {
    // type MenuItem = Required<MenuProps>['items'][number]
    // function getItem(
    //   label: React.ReactNode,
    //   key: React.Key,
    //   icon?: React.ReactNode,
    //   children?: MenuItem[]
    // ): MenuItem {
    //   return {
    //     label,
    //     key,
    //     icon,
    //     children,
    //   } as MenuItem
    // }
    // const items: MenuItem[] = [
    //   getItem('nav 1', '/page1', <UserOutlined />),
    //   getItem('nav 2', '/page2', <VideoCameraOutlined />),
    //   getItem('nav 3', '/page3', <VideoCameraOutlined />,[
    //     getItem('nav 4', '/page3/page4', <UserOutlined />),
    //   ])
    // ]

    const items = [
        {
            key: "/page1",
            icon: <UserOutlined />,
            label: "nav 1",
        },
        {
            key: "/page2",
            icon: <VideoCameraOutlined />,
            label: "nav 2",
        },
        {
            key: "/page3",
            icon: <UploadOutlined />,
            label: "nav 3",
            children: [
                {
                    key: "/page3/page4",
                    icon: <VideoCameraOutlined />,
                    label: "nav 4",
                },
                {
                    key: "/page3/page5",
                    icon: <VideoCameraOutlined />,
                    label: "nav 5",
                },
            ],
        },
        {
            key: "/page6",
            icon: <UploadOutlined />,
            label: "nav 6",
            children: [
                {
                    key: "/page3/page7",
                    icon: <VideoCameraOutlined />,
                    label: "nav 7",
                },
                {
                    key: "/page3/page8",
                    icon: <VideoCameraOutlined />,
                    label: "nav 8",
                },
            ],
        },
    ];
    const navigateTo = useNavigate();
    const currentRouter = useLocation();
    const onClickMenu = (e: any) => {
        // console.log('点击了', e.key);
        navigateTo(e.key); //跳转
    };
    const handleOpenChange = (keys: string[]) => {
        setOpenKey([keys[keys.length - 1]])
        // console.log(keys)
    };
    let firstKeys: string = ''

    function findKeys(obj: { key: string; }) {
        return obj.key === currentRouter.pathname
    }
    for (let i = 0; i < items.length; i++) {
        if (items[i]!['children'] && items[i]!['children'].length > 0 && items[i]!['children'].find(findKeys)) {
            firstKeys = items[i]!.key as string;
            break
        }
    }
    const [openkeys, setOpenKey] = useState([firstKeys]);

    return (
        <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[currentRouter.pathname]}
            onClick={onClickMenu}
            items={items}
            onOpenChange={handleOpenChange}
            openKeys={openkeys}
        />
    )
}
export default Comp;
